<template>
	<n-tabs :value="modelValue" @update:value="onChange" :bar-width="40" animated>
		<n-tab :name="CasinoMyBetsTab.unsettled">
			<base-badge :value="unsettledNum" :offset="[4, -4]" show-zero>
				<div class="text-base">{{ $t('myBets.unsettled') }}</div>
			</base-badge>
		</n-tab>
		<n-tab :name="CasinoMyBetsTab.settled" :tab="$t('myBets.settled')"></n-tab>
		<n-tab :name="CasinoMyBetsTab.all" :tab="$t('myBets.all')"></n-tab>
	</n-tabs>
</template>

<script lang="ts" setup>
import { NTabs, NTab } from 'naive-ui'
import { BaseBadge } from '@/components/base'
import { PropType } from 'vue'
import { CasinoMyBetsTab } from './types'

defineProps({
	modelValue: {
		type: Number as PropType<CasinoMyBetsTab>,
		required: true
	},
	cashoutNum: {
		type: Number,
		default: 0
	},
	liveNum: {
		type: Number,
		default: 0
	},
	unsettledNum: {
		type: Number,
		default: 0
	}
})

const emits = defineEmits(['update:modelValue'])

const onChange = (val: CasinoMyBetsTab) => emits('update:modelValue', val)
</script>
